<template>
	<view class="box">
		<view style="background-color: #FFFFFF;">
			<MyTabs :tabs="tabs" v-model:currentTab="currentTab"></MyTabs>

			<view class="box_sousuo">
				<view class="box_mainss">
					<image style="width: 34rpx;height: 34rpx;margin: 0 24rpx;" src="../../static/search_search@2x.png"
						mode=""></image>
					<input class="zhensousuo" type="text" placeholder="输入关键词进行搜索" />
				</view>
				取消
			</view>
		</view>
		<view class="list_liebiao">
			<view class="list_dashu" v-for="(project, index) in projects[tabs[currentTab].name]" :key="index">
				<view class="list_data">
					<image class="tupian" :src="project.url" mode=""></image>
					<view class="box_text">
						<view class="xbt">
							{{ project.title }}
							<view class="Phase">
								{{ project.Phase }}期
							</view>
						</view>
						<view class="kehu">
							客户：<view class="">{{ project.customer }}</view>
						</view>
						<view class="fzrn">
							<view class="box_fuzeren">
								负责人：{{ project.manager }}
							</view>
						</view>
					</view>
				</view>
				<view class="box_anniu">
					<view class="jrxmu" @click="goproject">项目信息</view>
					<view class="khuweihu" @click="CustomerMaintenance">客户维护</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import MyTabs from '../../components/Mymaintenance/My_maintenance.vue';

	export default {
		components: {
			MyTabs
		},
		setup() {
			const tabs = reactive([{
					name: '未交付'
				},
				{
					name: '已交付'
				},
				{
					name: '已终止'
				}
			]);
			const currentTab = ref(0);
			const projects = reactive({
				'未交付': [{
					title: '国大项目一期',
					customer: '东阳市国大管业有限公司',
					manager: '周润发 | 实施 | ：周星驰周润发周润发 | 实施 | ：周星驰',
					Phase: '一',
					url: '/static/xiangmu/u=1068954347,4195351236&fm=202.jfif'
				}],
				'已交付': [{
						title: '已交付项目一',
						customer: 'XX电商公司',
						manager: '李四 | 开发 | ：张三李四王五 | 测试 | ：赵六',
						Phase: '二',
						url: '/static/xiangmu/u=1446809703,1251772030&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp'
					},
					{
						title: '已交付项目二',
						customer: 'XX企业',
						manager: '王五 | 开发 | ：陈七王五刘八 | 测试 | ：孙九',
						Phase: '三',
						url: '/static/xiangmu/u=922115068,768610694&fm=253&fmt=auto&app=120&f=JPEG.webp'
					},
					{
						title: '已交付项目三',
						customer: 'XX科技公司',
						manager: '赵六 | 开发 | ：周十赵六吴十一 | 测试 | ：郑十二',
						Phase: '一',
						url: '/static/xiangmu/u=3490257300,2192033606&fm=253&fmt=auto&app=138&f=JPEG.webp'
					}
				],
				'已终止': [{
						title: '已终止项目一',
						customer: 'YY公司',
						manager: '钱七 | 调研 | ：孙八钱七周九 | 评估 | ：吴十',
						Phase: '一',
						url: '/static/xiangmu/u=786095040,2648832161&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp'
					},
					{
						title: '已终止项目二',
						customer: 'ZZ企业',
						manager: '孙九 | 财务 | ：李十孙九王十一 | 管理 | ：陈十二',
						Phase: '一',
						url: '/static/xiangmu/u=150105536,868139179&fm=253&fmt=auto&app=120&f=JPEG.webp'
					},
					{
						title: '已终止项目三',
						customer: 'AA科技公司',
						manager: '周十 | 需求分析 | ：郑十二周十吴十三 | 项目管理 | ：刘十四',
						Phase: '二',
						url: '/static/xiangmu/u=1815412717,3327677908&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto.webp'
					}
				]
			});

			const goproject = () => {
				console.log('进入项目被点击');
				// Add navigation logic here:
				// uni.navigateTo({ url: '/pages/projectDetail/projectDetail' });
			};

			const CustomerMaintenance = () => {
				console.log('进入客户维护');

				console.log("e");
			};

			onMounted(() => {
				loadUserInfo();
			});

			const loadUserInfo = () => {
				// Simulate loading user info from local storage or API
				const username = uni.getStorageSync('loginUsername') || '';
				const password = uni.getStorageSync('loginPassword') || '';
				console.log(username, password);
			};

			return {
				tabs,
				currentTab,
				projects,
				goproject,
				CustomerMaintenance
			};
		}
	};
</script>

<style scoped>
	.box {
		height: 100vh;
		background-color: #F6F6F6;
		padding-bottom: 10rpx;
	}

	.box_sousuo {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		margin: 0rpx 20rpx;
		padding: 25rpx 0;
	}

	.box_mainss {
		display: flex;
		width: 600rpx;
		height: 70rpx;
		background: #F3F3F3;
		border-radius: 16rpx;
		align-items: center;
		margin-right: 30rpx;
	}

	.zhensousuo {
		width: 500rpx;
	}

	.list_data {
		display: flex;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		align-items: center;
		padding-left: 10rpx;
	}

	.list_dashu {
		margin: 20rpx 20rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding-bottom: 40rpx;
	}

	.box_text {
		padding: 50rpx 15rpx;
	}

	.box_anniu {
		display: flex;
		justify-content: space-around;
	}

	.jrxmu {
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		width: 308rpx;
		height: 64rpx;
		background: #4FC2FD;
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(30, 158, 190, 0.25);
		border-radius: 32rpx;
		text-align: center;
		line-height: 64rpx;
	}

	.khuweihu {
		width: 308rpx;
		height: 64rpx;
		background: #4170FF;
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(30, 61, 190, 0.25);
		border-radius: 32rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 64rpx;
	}

	.xbt {
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
		display: flex;
		align-items: center;
	}

	.kehu {
		font-weight: bold;
		font-size: 24rpx;
		color: #222222;
		margin: 20rpx 0;
		display: flex;
	}

	.fzrn {
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 1.6;
	}

	.tupian {
		height: 140rpx;
		width: 140rpx;
	}

	.Phase {
		width: 60rpx;
		height: 32rpx;
		background: #ECF0FF;
		border-radius: 4rpx;
		margin-left: 15rpx;
		text-align: center;
		line-height: 32rpx;
		color: #4170FF;
		font-weight: 400;
		font-size: 20rpx;
	}
</style>